<template>
    <div class="menu">
        <div class="wrapper" v-for="item in menuNavData" :key="item.path" :index="item.path">
            <div class="title">
                <component :is="item.icon" :style="{fontSize: '16px'}"></component>
                <span class="title-text">{{ item.title }}</span>
            </div>
            <div class="tabs">
                <div
                    class="tab"
                    v-for="subItem in item.children"
                    :key="subItem.path"
                    :index="subItem.path"
                    @click="handleChooseTab(subItem)"
                >
                    <div :class="[subItem.path === selectKey ? 'active-tab' : '', 'tab-text']">
                        {{ subItem.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import _ from "lodash";
import {watch} from "vue";
import {useRouter} from "vue-router";
import {useSessionStorage} from "@vueuse/core";
import {BarChartOutlined, SettingOutlined, CommentOutlined} from "@ant-design/icons-vue";

import {STORAGE} from "@/utils/config";
import {handleGetData, navPath, RouterData} from "@/router/config.ts";
import {systemRouter, chatRoomRouter, statisticsRouter, homeRouter} from "@/router/router.ts";

const menuNavData = [
    {
        title: "首页",
        path: "/home",
        icon: BarChartOutlined,
        children: handleGetData(homeRouter),
    },
    {
        title: "系统设置",
        path: "/setting",
        icon: SettingOutlined,
        children: handleGetData(systemRouter),
    },
    {
        title: "企微聊天室",
        path: "/setting",
        icon: CommentOutlined,
        children: handleGetData(chatRoomRouter),
    },
    {
        title: "数据统计",
        path: "/statistics",
        icon: BarChartOutlined,
        children: handleGetData(statisticsRouter),
    },
];

const nav = useRouter();
const selectKey = useSessionStorage(STORAGE.MENU_SELECT_KEY, "");

const handleChooseTab = row => {
    if (row.path === navPath.chatRoom) {
        const url = location.origin + navPath.weChatOnLine;
        window.open(url);
    } else {
        selectKey.value = row.path;
        nav.push(row.path);
    }
};

// 监听当前路由
watch(
    () => nav.currentRoute.value,
    route => {
        const firstPath = _.compact(route.path.split("/"))[0];
        if (firstPath === "setting") {
            selectKey.value = route.path;
        }
    },
    {immediate: true}
);
</script>

<style lang="less" scoped>
.menu {
    width: 226px;
    height: 100%;
    background: #222;
    border-right: 1px solid #ccc;
    padding-top: 12px;

    .wrapper {
        width: 100%;
        box-sizing: border-box;
        padding: 0 12px 4px;

        .title {
            color: #ffffffd9;
            font-size: 14px;
            line-height: 40px;
            display: flex;
            align-items: center;
            cursor: pointer;
            &-text {
                margin-left: 10px;
            }
        }

        .tabs {
            background: #292929;
            display: grid;
            grid-template-columns: repeat(2, 98px); /* 每列宽度固定为100px，4列 */
            gap: 6px; /* 单元格之间的间距 */
            border-radius: 4px;

            .tab {
                width: 100%;
                height: 34px;
                padding: 4px 0;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                &-text {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 10px;
                    color: #ffffffa6;
                    align-items: center;
                    font-size: 13px;
                    cursor: pointer;
                    &:hover {
                        color: #fff;
                    }
                }
            }
            .active-tab {
                color: #fff;
            }
        }
    }
}
</style>
